<template>
    <el-upload
            class="uploader"
            ref="uploader"
            action="placeholder"
            :http-request="requestUpload"
            :on-preview="downloadFile"
            :on-exceed="onExceed"
            :before-upload="beforeUpload"
            :auto-upload="true"
            :limit="1"
            :disabled="disabled">
        <el-button  v-if="!disabled" slot="trigger" size="small" type="primary" round>批量上传</el-button>
<!--        <div v-if="!disabled" slot="tip" class="el-upload__tip">最多上传1个文件，且单个不超过5MB</div>-->
    </el-upload>
</template>

<script>
    import {qaStandardRecordUploadPost} from "../service/api";
    // import {fileDownLoad} from "../../utils/downloadUtil";

    export default {
        name: "uploader-file",
        props:{
            disabled:{
                required:false,
                default:false
            },
            // fileList:{
            //     required:false,
            //     default:()=>{return []}
            // },
            // inputTypeList:{
            //     required:false,
            //     default:()=>{return _.cloneDeep(fileTypeList)}
            // }

        },
        data(){
            return {
                localFileList:[],
                limit:1,
                fileTypeList:['xlsx','xls'],

            }
        },
        methods:{
            onExceed(){

            },
            // deleteFile(deletedFile,fileList){
            //     let match=this.fileList.find((file)=>{
            //         return file.uid===deletedFile.uid;
            //     })
            //     if(match){
            //         return requestDeleteFile({fileID:match.fileID}).then((data)=>{
            //             let fileIndex=fileList.findIndex((file)=>{
            //                 return match.fileID===file.fileID;
            //             });
            //             this.fileList.splice(fileIndex,1);
            //             this.$message.success("删除成功")
            //         })
            //     }
            // },
            beforeUpload(item){
                if (item) {
                    if (item.size >= 5242880) {
                        this.$message.warning(item.name + ' 文件大于5MB');
                        return false
                    }
                    let uploadList=this.$refs.uploader?.uploadFiles;
                    if(uploadList.length&&uploadList.length>this.limit){
                        this.$message.warning("上传文件已达到最大个数");
                        return false;
                    }
                    let fileType=item.name.substring(item.name.lastIndexOf('.')+1)
                    let hasType=this.fileTypeList.indexOf(fileType)
                    if(hasType<0){
                        this.$message.warning('不支持'+fileType+'文件上传')
                        return false
                    }
                }
            },
            requestUpload(item) {
                let that=this
                if (item && item.file) {
                    let formData = new FormData();
                    formData.append('file',item.file)
                    qaStandardRecordUploadPost(formData).then(res=>{
                        let data=res.data
                        console.log(res)
                        // this.fileList.push({fileID:res.fileID,name:item.file.name});
                        if(data.errors.length==0&&data.unrecognizeds.length==0){
                            that.$message.success("文件上传成功")
                        }else{
                            if(data.errors.length!=0){
                                this.$emit('childEvent', { centerDialogVisible: true,centerVisible: false ,data:data.errors})
                            }else{
                                this.$emit('childEvent', { centerDialogVisible: false,centerVisible: true,data:data.unrecognizeds,url:data.targetUrl })
                            }


                        }


                    })

                }
            },
            // downloadFile(file) {
            //     let requestData = {fileID:file.fileID};
            //     requestDownloadFile(requestData).then(response => {
            //         fileDownLoad(response,file.name);
            //     })
            // },
        }
    }
</script>
<!--lang="scss"-->
<style scoped >
    .uploader{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        /*::v-deep .el-upload-list__item {*/
        /*    transition: none !important;*/
        /*}*/
    }
</style>